<template>
  <div>

       <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品档案添加</el-breadcrumb-item>
    </el-breadcrumb>


    <el-row width="100%">

      <el-col :span="16" :offset="4">
        <el-button type="success" style="z-index:99;width:200px;position: relative;left: 106px;top: 125px;" @click="open">成功按钮</el-button>
        <h4 align="left">基本配置</h4>
        <el-divider content-position="right"></el-divider>
        <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" style="width: 380px">

          <el-form-item label="商品类型：">
            <el-select  placeholder="请选择">
            </el-select>
          </el-form-item>

         <el-form-item label="商品编码：">
            <el-input v-model="formLabelAlign.region" style="width:150px"></el-input>
              <!-- `checked` 为 true 或 false -->
            <el-checkbox v-model="checked">备选项</el-checkbox>
          </el-form-item>


          <el-form-item label="品牌名称：">
            <el-input v-model="formLabelAlign.name"></el-input>
          </el-form-item>

          <el-form-item label="所属品牌：">
            <el-select v-model="formLabelAlign.region" placeholder="广东省" style="width: 200px;">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="所属单位：">
            <el-select v-model="formLabelAlign.region" placeholder="广东省" style="width: 200px;">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="零售价：">
            <el-input v-model="formLabelAlign.region"></el-input>
          </el-form-item>

          <el-form-item label="最低售价：">
            <el-input v-model="formLabelAlign.region"></el-input>
          </el-form-item>

          <el-form-item label="市场指导价：">
            <el-input v-model="formLabelAlign.region"></el-input>
          </el-form-item>

          <el-form-item label="成本参考价：">
            <el-input v-model="formLabelAlign.region"></el-input>
          </el-form-item>

          
          <el-form-item label="助记码：">
            <el-input v-model="formLabelAlign.region"></el-input>
          </el-form-item>

            <el-form-item label="会员价：">
            <el-input v-model="formLabelAlign.region"></el-input>
          </el-form-item>

         <el-form-item label="积分：">
            <el-radio v-model="formLabelAlign.region" label="1">是</el-radio>
            <el-radio v-model="formLabelAlign.region" label="2">否</el-radio>
          </el-form-item> 
        </el-form>

          
          <h4 align="left"><el-checkbox v-model="checked"></el-checkbox>商城设置</h4>
        <el-divider content-position="right"></el-divider>
        <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" style="width: 380px">
          <el-form-item label="搜索关键字：">
            <el-input v-model="formLabelAlign.name"></el-input>
          </el-form-item>
          <el-form-item label="商品标签：">
            <el-radio v-model="formLabelAlign.region" label="1">男</el-radio>
            <el-radio v-model="formLabelAlign.region" label="2">女</el-radio>
          </el-form-item>
          <el-form-item label="运费计算：">
            <el-input v-model="formLabelAlign.region"></el-input>
          </el-form-item>
          <el-form-item label="排序：">
            <el-input v-model="formLabelAlign.region"></el-input>
          </el-form-item>
          <el-form-item label="商品图片：">
            <el-input v-model="formLabelAlign.region"></el-input>
          </el-form-item>
            <el-form-item label="描述：" prop="desc" >
            <el-input type="textarea" v-model="formLabelAlign.region"></el-input>
          </el-form-item>
        </el-form>

        <h4 align="left">其他信息</h4>
        <el-divider content-position="right"></el-divider>
        <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" style="width: 380px">
          <el-form-item >
            <el-button type="primary" style="float: left;">保存</el-button>
            <el-button type="primary" style="float: left;">取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    methods:{
      open() {
        this.$prompt('请输入邮箱', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '你的邮箱是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      }
    },
    data() {
      return {
        labelPosition: 'right',
        checked: true,
        formLabelAlign: {
          name: '',
          region: '',
          type: '',
          
        }
      };
    }
  }
</script>

<style scoped>

</style>
